<template>
	<view class="view_main">
		<view class="view">
			<input v-model="form.username" placeholder="请输入用户名" />
			<input v-model="form.password" password placeholder="请输入新密码" />
			<view class="code_view">
				<input v-model="form.code" placeholder="请输入验证码" />
				<button size="mini" @click="sendCode">获取验证码</button>
			</view>
			<button @click="updatePassword">修改密码</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					username: "",
					password: "",
					code: ""
				}
			};
		},
		methods: {
			updatePassword() {
				this.$.ajax({
					url: '/user/updatePassword',
					type: "POST",
					data: this.form,
					success: (res) => {
						uni.showToast({
							title: "密码修改成功",
							icon: "success"
						});
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}
				});
			},
			// 发送验证码
			sendCode() {
				uni.showLoading({
					title: '验证码发送中...'
				});
				this.$.ajax({
					type: 'POST',
					url: '/user/sendCode',
					data: {
						username: this.form.username
					},
					success: (res) => {
						uni.hideLoading();
						uni.showToast({
							title: "验证码发送成功",
							icon: "success"
						})
					}
				});
				
			}
		}
	}
</script>

<style lang="scss">
	.view_main {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;

		.view {
			margin-top: 160rpx;
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;

			input {
				margin-top: 30rpx;
				width: 70%;
				border-bottom: 1px solid #ddd;
				padding: 20rpx 30rpx;
			}

			image {
				width: 250rpx;
				height: 250rpx;
			}

			button {
				width: 70%;
				margin-top: 80rpx;
				background-color: #00A2FF;
				color: white;
				box-shadow: 10rpx 10rpx 10rpx gray;
			}

			button:active {
				position: relative;
				top: 5rpx;
				left: 5rpx;
				box-shadow: 5rpx 5rpx 5rpx gray;
			}
			
			.code_view {
				width: 79%;
				display: flex;
				justify-self: center;
				align-items: center;
				
				button {
					margin: 40rpx 0 0 30rpx;
				}
			}
		}
	}
</style>